import React, { useEffect, useLayoutEffect, useRef } from "react";
import './App.scss'

function App() {
  const titleRef = useRef(null);

  // 自定义 hooks 函数
  function useCss(color) {
    useEffect(() => {
      if (titleRef.current) {
        titleRef.current.style.color = color;
      }
    }, [color]);
  }

  useCss('#f66');

  useEffect(() => {
    console.log('useEffect');
  }, []);

  useLayoutEffect(() => {
    console.log('useLayoutEffect');
  }, []);

  return (
    <div>
      <h1 id="title" ref={titleRef}>App</h1>
    </div>
  );
}

export default App;